<template>
	<view class="wrap">
		<u-icon class="go_category" name="home" color="#FFFFFF" size="48" @click="goCategoryPage"></u-icon>
		<u-swiper :list="imageList" mode="number" height="600" @click="previewImage"></u-swiper>
		<view class="card">
			<view class="class_item">
				<text class="class_price">￥{{categoryInfo.price||'面议'}}</text>
				<text class="class_name">{{categoryInfo.name}}</text>
			</view>
			<view class="share">
				<text>转发：</text>

				<button class="share-button"><u-icon name="photo-fill" color="#91ED61" size="58"
						label-pos="left"></u-icon></button>
				<button class="share-button" open-type="share"><u-icon name="weixin-fill" color="#1AAD19" size="58"></u-icon></button>

			</view>
		</view>
		<view class="table">
			<view class="thead">
				<text class="th_01">参数</text>
				<text class="th_02">内容</text>
			</view>
			<view class="tbody">
				<view class="name">
					<text>品种:</text>
					<text>幅宽:</text>
					<text>克重:</text>
					<text>米数:</text>
					<text>成分:</text>
				</view>
				<view class="info">
					<text>{{categoryInfo.buzhong}}</text>
					<text>{{categoryInfo.fukuan}}</text>
					<text>{{categoryInfo.kezhong}}</text>
					<text>{{categoryInfo.mishu}}</text>
					<text>{{categoryInfo.chengfen}}</text>
				</view>
			</view>
		</view>
		<view class="total_value">
			<view class="goods_mode_text">颜色数量：</view>
			<u-count-to color="#fa3534" font-size="28" :start-val="0" :end-val="total"></u-count-to>
		</view>

		<view style="width: 750rpx;">
			<u-tabs name="tab_name" count="tab_count" ref="tabs" :list="tabList" :current="tabCurrent" font-size="35"
				active-color="#303133" @change="tabChange"></u-tabs>
		</view>

		<view v-show="tabCurrent==0">
			<view class="goods_mode">
				<view class="goods_mode_text">查看模式：</view>
				<u-radio-group v-model="radioValue" @change="radioGroupChange" >
					<u-radio @change="radioChange" active-color="#c0c4cc" v-for="(item, index) in radioList" :key="index" :name="item.name"
						:disabled="item.disabled">
						{{item.name}}
					</u-radio>
				</u-radio-group>
			</view>
			<!-- <view class="total_value">
				<view class="goods_mode_text">颜色数量：</view>
				<u-count-to color="#fa3534" :start-val="0" :end-val="total"></u-count-to>
			</view> -->


			<square :goodsList="goodsList" :category_id="_id" v-if="radioValue=='方形'" ></square>
			<circle :goodsList="goodsList" :category_id="_id" v-else></circle>
			
			<view class="pagination">
				<uni-pagination pageSize="18" :current="pagCurrent" :total="total" @change="pageChange" />
			</view>
			
			<button class="share-button changePageButton" 
				@click="pagePickShow">选择页码：{{pagCurrent}}</button>
			<u-picker v-model="pickShow" :default-selector="[0]" :range="pageList" mode="selector" @confirm="pickPageChange"></u-picker>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters
	} from 'vuex';
	export default {
		data() {
			return {
				_id:'',
				list: [{
						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
						title: '昨夜星辰昨夜风，画楼西畔桂堂东'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
						title: '身无彩凤双飞翼，心有灵犀一点通'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
						title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
					}
				],
				tabList: [{
					tab_name: '色卡',
				}, {
					tab_name: '简介'
				}],
				tabCurrent: 0,
				
				radioList: [{
						name: '方形',
						disabled: false
					},
					{
						name: '圆形',
						disabled: false
					}
				],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				radioValue: '方形',
				pickShow:false,
				pagCurrent:1
				
			}
		},
		mounted() {
		
		},
		onLoad(params) {
			
			const {
				_id
			} = params;
			// if(!_id){
			// 	uni.switchTab({
			// 		url:`/pages/my/my`
			// 	})
			// 	return;
			// };
			
			this._id = _id;
			this.$store.dispatch('getCategoryInfo', _id);
			if(!this.hasLogin){
				uni.showModal({
					title: "提示",
					content: '请先登录后查看',
					showCancel:false,
					success(res) {
						if (res.confirm) {
							// console.log('用户点击确定');
							// 关闭所有页面，打开到应用内的某个页面
							uni.reLaunch({
								url: '/pages/my/my'
							})
						}
					}
				})
				return;
			}
			this.$store.dispatch('getGoodsList',{_id,page:1});
		},
		methods: {
			goCategoryPage(){
				
				uni.switchTab({
					url:'/pages/category/category'
				});
			},
			previewImage(index){
				// const urlImg = this.imageList[index].image;
				const urls=[];
				this.imageList.forEach((item,index)=>{
					urls.push(item.image);
				});
				uni.previewImage({
					current:index,
					urls:urls
				})
			},
			tabChange(index) {
				this.tabCurrent = index;
			},
			// 选中某个单选框时，由radio时触发
			radioChange(e) {

				this.radioValue = e;
			},
			// 选中任一radio时，由radio-group触发
			radioGroupChange(e) {
				// console.log(e);
			},
			pagePickShow(){
				console.log('弹出')
				this.pickShow = true;
			},
			pickPageChange(e){
				
				const {_id} = this;
				const page = e[0]+1;
				this.pagCurrent = page;
				this.$store.dispatch('getGoodsList',{_id,page})
			},
			// 触发分页器
			pageChange(e){
				this.pagCurrent = e.current;
				const {_id} = this;
				const page = e.current;
				this.$store.dispatch('getGoodsList',{_id,page})
			},
			onShareAppMessage(){
				return{
					path:`/pages/list/list?_id=${this._id}`,
					title:this.categoryInfo.name,
					imageUrl:this.categoryInfo.icon
				}
			},
			// 分享到朋友圈
			onShareTimeline(){
				return{
					title:this.categoryInfo.name,
					query:`_id=${this.id}`,
					imageUrl:this.categoryInfo.icon
				}
			}
		},
		computed: {
			...mapState({
				categoryInfo: (state) => state.category.categoryInfo || {},
				imageList: (state) => state.category.imageList || [],
				goodsList: (state) => state.goods.goodsList || [],
				total: (state) => state.goods.total || 0,
				hasLogin: (state) => state.user.hasLogin,

			}),
			...mapGetters(['pageList']),
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		// padding: 20rpx;
		padding-bottom: 50rpx;
	}
.go_category{
	position: absolute;
	top: 100rpx;
	left: 50rpx;
	z-index: 999;
}
	.card {
		// width: 100%;
		padding: 20rpx 20rpx;
		display: flex;
		flex-direction: column;
		background-color: #fff;

		.class_item {
			display: flex;
			align-items: center;

			.class_price {
				color: #fa436a;
				font-size: 38rpx;
				font-weight: bold;
				margin-right: 20rpx;
			}

			.class_name {
				color: #111;
				font-size: 38rpx;
				font-weight: bold;
			}
		}

		.share {
			width: 100%;
			display: flex;
			justify-content: flex-end;
			align-items: center;

			text {
				font-size: 24rpx;
			}

			u-icon {
				margin-right: 40rpx;
			}
		}
	}

	.table {
		min-height: 200rpx;
		padding: 0 10rpx;
		background-color: #fff;

		.thead {
			display: flex;
			border: 0.5rpx solid #ddd;
			border-bottom: none;
			font-size: 28rpx;

			.th_01 {
				min-width: 200rpx;
				height: 45rpx;
				color: #9d9d9d;
				text-align: center;
				border-right: 0.5rpx solid #ddd;
			}

			.th_02 {
				flex: 1;
				color: #9d9d9d;
				text-align: center;
			}
		}

		.tbody {
			display: flex;
			border: 0.5rpx solid #ddd;
			border-bottom: none;

			.name {
				min-width: 200rpx;
				display: flex;
				flex-direction: column;
				border-right: 0.5rpx solid #ddd;

				text {
					height: 45rpx;
					font-size: 24rpx;
					color: #9d9d9d;
					text-align: center;
					line-height: 45rpx;
					border-bottom: 0.5rpx solid #ddd;
				}
			}

			.info {
				flex: 1;
				display: flex;
				flex-direction: column;

				text {
					height: 45rpx;
					font-size: 24rpx;
					color: #9d9d9d;
					padding: 0 20rpx;
					line-height: 45rpx;
					border-bottom: 0.5rpx solid #ddd;
					overflow: hidden;
				}
			}
		}
	}

	.goods_mode {
		height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		.goods_mode_text {
			font-size: 28rpx;
			color: #606266;
		}
	}

	.total_value {
		// height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0 10rpx;
		border: 0.5rpx solid #ddd;
		border-top: none;

		.goods_mode_text {
			font-size: 28rpx;
			color: #606266;
		}
	}

	.share-button {
		margin: 0;
		padding: 0;
		outline: none;
		border-radius: 0;
		background-color: transparent;
		line-height: inherit;
	}
	.share-button::after{
		border: none;
	}
	
	.pagination {
		padding: 0 50rpx;
	
	}
	
	.changePageButton{
		color:#9e9e9e;
		border:none;
		margin: 10rpx 20rpx;
	}
</style>